<template>
  <div class="zujian">
    <div class="zujian-header">
      <el-row>
        <el-col :md="8">挂件名称</el-col>
        <el-col :md="8">自定义名称</el-col>
      </el-row>
    </div>
    <ul id="zujian" class="zujian-grids">
      <li v-for="(item,index) in defaultList" :key="index" class="zujian-grids-grid">
        <el-row>
          <el-col :md="8" style="padding-left:20px;">
            <i class="el-icon-rank"></i>
            <el-checkbox v-model="item.check" @change="update(item)" :label="item.id" :key="item.id">{{ item.title }}</el-checkbox>
          </el-col>
          <el-col :md="8">{{ item.newTitle ? item.newTitle:item.title}}</el-col>
          <el-col :md="8" style="text-align:right;padding-right:20px;">
            <el-button
              v-if="item.check"
              type="primary"
              size="mini"
              @click="handleClick(item)"
            >{{ item.kind }}
            </el-button>
          </el-col>
        </el-row>
      </li>
    </ul>
    <live-dialog :dialog="liveDialog" :dialog-data="recentLiveData" :default-title="defaultTitle" @liveclose="liveDialog = false" @livesubmit="liveDialog=false;fetchData()"/>
    <sort-dialog :dialog="sortDialog" :dialog-data="informationManageData" :default-title="defaultTitle" @sortclose="sortDialog = false" @sortsubmit="sortDialog=false;fetchData()"/>
    <team-dialog :dialog="teamDialog" :dialog-data="hotGroupData" :default-title="defaultTitle" @teamclose="teamDialog = false" @teamsubmit="teamDialog=false;fetchData()"/>
    <recommend-dialog :dialog="recommendDialog" :dialog-data="fineClassData" :default-title="defaultTitle" @recommendclose="recommendDialog = false" @recommendsubmit="recommendDialog=false;fetchData()"/>
    <opencourse-dialog :dialog="openCourseDialog" :dialog-data="openCourseData" :default-title="defaultTitle" @opencourseclose="openCourseDialog = false" @opencoursesubmit="openCourseDialog=false;fetchData()"/>
    <categorycourse1-dialog :dialog="categorycourse1Dialog" :dialog-data="categoryCourse1Data" :default-title="defaultTitle" @categorycourse1close="categorycourse1Dialog = false" @categorycourse1submit="categorycourse1Dialog=false;fetchData()"/>
    <recommendteacher-dialog :dialog="recommendteacherDialog" :dialog-data="recommendTeacherData" :default-title="defaultTitle" @recommendteacherclose="recommendteacherDialog = false" @recommendteachersubmit="recommendteacherDialog=false;fetchData()"/>
    <studentevaluation-dialog :dialog="studentevaluationDialog" :dialog-data="studentEvaluationData" :default-title="defaultTitle" @studentevaluationclose="studentevaluationDialog = false" @studentevaluationsubmit="studentevaluationDialog=false;fetchData()"/>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'
  import LiveDialog from './dialog/live'
  import SortDialog from './dialog/sort'
  import TeamDialog from './dialog/teamnumber'
  import RecommendDialog from './dialog/recommend'
  import OpencourseDialog from './dialog/opencourse'
  import Categorycourse1Dialog from './dialog/categorycourse1'
  import RecommendteacherDialog from './dialog/recommendteacher'
  import StudentevaluationDialog from './dialog/studentevaluation'
  import {getTenantId} from '@/utils/auth';
  import {list, update} from '@/api/system/sub_assembly'
  import {getCategoryCourse1Data, getData, getFineClassData, getHotGroupData, getOpenCourseData, getRecentLiveData, getRecommendTeacherData, getStudentEvaluationData} from '@/api/system/information_manage';

  export default {
    components: {
      Sortable,
      RecommendDialog,
      TeamDialog,
      SortDialog,
      LiveDialog,
      OpencourseDialog,
      Categorycourse1Dialog,
      RecommendteacherDialog,
      StudentevaluationDialog
    },
    data() {
      return {
        defaultTitle: '',
        liveDialog: false,
        sortDialog: false,
        informationManageData: {},
        openCourseData: {},
        recentLiveData: {},
        categoryCourse1Data: {},
        fineClassData: {},
        hotGroupData: {},
        recommendTeacherData: {},
        studentEvaluationData: {},
        teamDialog: false,
        recommendDialog: false,
        openCourseDialog: false,
        categorycourse1Dialog: false,
        recommendteacherDialog: false,
        studentevaluationDialog: false,
        defaultList: [
          // kind为设置时 必须有url跳转链接
          {
            title: '广告小图片',
            check: true,
            kind: '设置',
            type: '',
            url: '/operate/edit'
          },
          // kind为编辑时 判断type来打开哪个dialog
          {
            title: '最新资讯',
            check: true,
            kind: '编辑',
            type: 'informationmanage'
          },
          {
            title: '热门公开课',
            check: true,
            kind: '编辑',
            type: 'opencourse'
          },
          {
            title: '近期直播',
            check: true,
            kind: '编辑',
            type: 'recentlive'
          },
          {
            title: '分类课程1',
            check: true,
            kind: '编辑',
            type: 'categorycourse1'
          },
          {
            title: '分类课程2',
            check: true,
            kind: '编辑',
            type: 'categorycourse2'
          },
          {
            title: '分类课程3',
            check: true,
            kind: '编辑',
            type: 'categorycourse3'
          },
          {
            title: '推荐班级1',
            check: true,
            kind: '编辑',
            type: 'fineclass1'
          },
          {
            title: '热门小组',
            check: true,
            kind: '编辑',
            type: 'hotgroup'
          },
          {
            title: '推荐教师',
            check: true,
            kind: '编辑',
            type: 'recommendteacher'
          },
          {
            title: '学员评价',
            check: true,
            kind: '编辑',
            type: 'studentevaluation'
          },
          {
            title: '友情链接',
            check: true,
            kind: '设置',
            type: '',
            url: '/system/setsite'
          },
          {
            title: '特色图片',
            check: true,
            kind: '设置',
            type: '',
            url: '/operate/edit'
          },
          {
            title: '底部链接',
            check: true,
            kind: '设置',
            type: '',
            url: '/system/setsite'
          },
          {
            title: '分类课程4',
            check: true,
            kind: '编辑',
            type: 'categorycourse4'
          },
          {
            title: '分类课程5',
            check: true,
            kind: '编辑',
            type: 'categorycourse5'
          },
          {
            title: '分类课程6',
            check: true,
            kind: '编辑',
            type: 'categorycourse6'
          },
          {
            title: '分类课程7',
            check: true,
            kind: '编辑',
            type: 'categorycourse7'
          },
          {
            title: '分类课程8',
            check: true,
            kind: '编辑',
            type: 'categorycourse8'
          },
          {
            title: '推荐班级2',
            check: true,
            kind: '编辑',
            type: 'fineclass2'
          },
          {
            title: '推荐班级3',
            check: true,
            kind: '编辑',
            type: 'fineclass3'
          }
        ]
      }
    },
    mounted() {
      this.sortableInit()
    },
    created() {
      this.fetchData()
    },
    methods: {
      getInformationManageData(code, tenantId) {
        getData(code, tenantId).then(response => {
          this.informationManageData = Object.assign({}, response.data.informationManage)
          this.informationManageData.code = code
          this.informationManageData.tenantId = tenantId
        }).catch(err => {
          console.log(err)
        })
      },
      findOpenCourseData(code, tenantId) {
        getOpenCourseData(code, tenantId).then(response => {
          this.openCourseData = Object.assign({}, response.data.openCourse)
          this.openCourseData.code = code
          this.openCourseData.tenantId = tenantId
        }).catch(err => {
          console.log(err)
        })
      },
      findRecentLiveData(code, tenantId) {
        getRecentLiveData(code, tenantId).then(response => {
          this.recentLiveData = Object.assign({}, response.data.recentLive)
          this.recentLiveData.code = code
          this.recentLiveData.tenantId = tenantId
        }).catch(err => {
          console.log(err)
        })
      },
      findCategoryCourse1Data(code, tenantId) {
        getCategoryCourse1Data(code, tenantId).then(response => {
          this.categoryCourse1Data = Object.assign({}, response.data.categoryCourse)
          this.categoryCourse1Data.code = code
          this.categoryCourse1Data.tenantId = tenantId
        }).catch(err => {
          console.log(err)
        })
      },
      findFineClassData(code, tenantId) {
        getFineClassData(code, tenantId).then(response => {
          this.fineClassData = Object.assign({}, response.data.fineClass)
          this.fineClassData.code = code
          this.fineClassData.tenantId = tenantId
        }).catch(err => {
          console.log(err)
        })
      },
      findHotGroupData(code, tenantId) {
        getHotGroupData(code, tenantId).then(response => {
          this.hotGroupData = Object.assign({}, response.data.hotGroup)
          this.hotGroupData.code = code
          this.hotGroupData.tenantId = tenantId
        }).catch(err => {
          console.log(err)
        })
      },
      findRecommendTeacherData(code, tenantId) {
        getRecommendTeacherData(code, tenantId).then(response => {
          this.recommendTeacherData = Object.assign({}, response.data.recommendTeacher)
          this.recommendTeacherData.code = code
          this.recommendTeacherData.tenantId = tenantId
        }).catch(err => {
          console.log(err)
        })
      },
      findStudentEvaluationData(code, tenantId) {
        getStudentEvaluationData(code, tenantId).then(response => {
          this.studentEvaluationData = Object.assign({}, response.data.studentEvaluation)
          this.studentEvaluationData.code = code
          this.studentEvaluationData.tenantId = tenantId
        }).catch(err => {
          console.log(err)
        })
      },
      fetchData() {
        list(getTenantId()).then(response => {
          this.defaultList = response.data.items;
        });
      },
      update(val) {
        update(val).then(() => {
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
          this.fetchData();
        })
      },
      handleClick(val) {
        if (val.url) {
          this.$router.push(val.url)
          return
        }
        const type = val.type
        this.defaultTitle = val.title
        if (type === 'opencourse') {
          this.findOpenCourseData(val.code, val.tenantId);
          this.openCourseDialog = true
          return
        }
        if (type === 'recentlive') {
          this.findRecentLiveData(val.code, val.tenantId);
          this.liveDialog = true
          return
        }
        if (type === 'informationmanage') {
          this.getInformationManageData(val.code, val.tenantId);
          this.sortDialog = true
          return
        }
        if (type.indexOf('fineclass') !== -1) {
          this.findFineClassData(val.code, val.tenantId);
          this.recommendDialog = true
          return
        }
        if (type === 'hotgroup') {
          this.findHotGroupData(val.code, val.tenantId);
          this.teamDialog = true
          return
        }
        if (type.indexOf('categorycourse') !== -1) {
          this.findCategoryCourse1Data(val.code, val.tenantId);
          this.categorycourse1Dialog = true
          return
        }
        if (type === 'recommendteacher') {
          this.findRecommendTeacherData(val.code, val.tenantId);
          this.recommendteacherDialog = true
          return
        }
        if (type === 'studentevaluation') {
          this.findStudentEvaluationData(val.code, val.tenantId);
          this.studentevaluationDialog = true
          return
        }
      },
      sortableInit() {
        const el = document.getElementById('zujian')
        const sortable = Sortable.create(el, {
          delay: 5
        })
        console.log(sortable)
      }
    }
  }
</script>

<style lang="scss">
  .zujian {
    padding: 0;

    &-header {
      width: 100%;
      padding: 10px 15px;
      background-color: #f5f7fa;
      color: #333;
    }

    &-grids {
      height: 500px;
      overflow: auto;
      margin: 0;
      padding: 0;
      list-style: none;

      &-grid {
        position: relative;
        display: block;
        width: 100%;
        padding: 10px 0;
        margin-bottom: -1px;
        background-color: #fff;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;

        .el-row {
          line-height: 28px;
          font-size: 14px;

          .el-checkbox__label {
            font-size: 18px;
          }

          i {
            font-size: 16px;
            margin-right: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>

